<template>
  <el-tabs v-model="activeName" @tab-click="tabhandleClick">
    <el-tab-pane label="日常收入" name="first">
      <div>
        <div>
          <span>单据编号：</span>
          <Input
            v-model="input_number"
            placeholder="请输入名称"
            style="width: auto; margin-right: 20px"
          />
          <Button
            type="primary"
            icon="ios-search"
            :loading="loading"
            @click="btn_search"
            style="margin-right: 20px"
          >
            <span v-if="!this.loading">查询</span>
            <span v-else>查询中</span>
          </Button>
          <Button icon="md-refresh" @click="reset">重置</Button>
        </div>
        <div>
          <el-table
            v-loading="table_loading"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>

            <el-table-column property="payer" label="往来单位">
            </el-table-column>
            <el-table-column property="documentNumber" label="单据编号">
            </el-table-column>
            <el-table-column property="documentDate" label="单据日期">
            </el-table-column>
            <el-table-column property="operator" label="操作员">
            </el-table-column>
            <el-table-column property="remarks" label="备注"> </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleClick(scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <Page
            @on-change="tableData_query"
            :total="total"
            show-total
            :page-size="pagesize"
            style="float: right"
          />
        </div>
        <el-dialog
          title="查看"
          :visible.sync="dialogTableVisible"
          width="80%"
        >
          <div id="item">
            <p>往来单位：{{ payer }}</p>
            <p>经手人：{{ operator }}</p>
            <p>单据日期：{{ documentDate }}</p>
            <p>单据编号：{{ documentNumber }}</p>
            <p>收款账户：{{ accountBank }}</p>
            <p>收款金额：{{ totalAmount }}</p>
            <p>备注：{{ remarks }}</p>
          </div>
          <el-table :data="gridData">
            <el-table-column
              property="projectName"
              label="商品名称"
            ></el-table-column>
            <el-table-column property="num" label="数量"></el-table-column>
            <el-table-column
              property="untilMoney"
              label="单价"
            ></el-table-column>
            <el-table-column property="remarks" label="备注"></el-table-column>
          </el-table>
        </el-dialog>
      </div>
    </el-tab-pane>
    <el-tab-pane label="日常支出" name="second">
      <div>
        <div>
          <span>单据编号：</span>
          <Input
            v-model="input_number"
            placeholder="请输入名称"
            style="width: auto; margin-right: 20px"
          />
          <Button
            type="primary"
            icon="ios-search"
            :loading="loading"
            @click="btn_search"
            style="margin-right: 20px"
          >
            <span v-if="!this.loading">查询</span>
            <span v-else>查询中</span>
          </Button>
          <Button icon="md-refresh" @click="reset">重置</Button>
        </div>
        <div>
          <el-table
            v-loading="table_loading"
            :data="extableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>

            <el-table-column property="beneficiary" label="往来单位">
            </el-table-column>
            <el-table-column property="documentNumber" label="单据编号">
            </el-table-column>
            <el-table-column property="documentDate" label="单据日期">
            </el-table-column>
            <el-table-column property="operator" label="操作员">
            </el-table-column>
            <el-table-column property="remarks" label="备注"> 
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="exhandleClick(scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <Page
            @on-change="tableData_query"
            :total="total"
            show-total
            :page-size="pagesize"
            style="float: right"
          />
        </div>
        <el-dialog
          title="查看"
          :visible.sync="exdialogTableVisible"
          width="80%"
        >
          <div id="item">
            <p>往来单位：{{ beneficiary }}</p>
            <p>经手人：{{ operator }}</p>
            <p>单据日期：{{ documentDate }}</p>
            <p>单据编号：{{ documentNumber }}</p>
            <p>收款账户：{{ accountBank }}</p>
            <p>收款金额：{{ totalAmount }}</p>
            <p>备注：{{ remarks }}</p>
          </div>
          <el-table :data="exgridData">
            <el-table-column
              property="projectName"
              label="商品名称"
            ></el-table-column>
            <el-table-column property="num" label="数量"></el-table-column>
            <el-table-column
              property="untilMoney"
              label="单价"
            ></el-table-column>
            <el-table-column property="remarks" label="备注"></el-table-column>
          </el-table>
        </el-dialog>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      activeName: "first",
      table_loading: true,
      input_number: "",
      loading: false,
      tableData: [],
      extableData:[],
      total: 0,
      currentPage: 1,
      pagesize: 7,
      dropdown_show: false,
      selectionData: [],
      modeltitle: "",
      dialogTableVisible: false,
      exdialogTableVisible:false,
      formLabelWidth: "120px",
      payer: "",
      documentNumber: "",
      documentDate: "",
      operator: "",
      totalAmount: "",
      remarks: "",
      accountBank: "",
      beneficiary:"",
      gridData: [],
      exgridData:[]
    };
  },
  created() {
    this.tableData_query();
  },
  methods: {
    //查询方法
    btn_search() {
      this.loading = true;
      this.tableData_query();
      this.loading = false;
    },
    //重置方法
    reset() {
      this.input_number = "";
    },
    //table数据
    tableData_query(currentPage) {
      if (currentPage != null) {
        this.currentPage = currentPage;
      }
      axios
        .post(
          "http://localhost:8082/inc/queryAll?documentNumber=" +
            this.input_number +
            "&page=" +
            this.currentPage +
            "&limit=" +
            this.pagesize
        )
        .then((res) => {
          console.log(res.data);
          this.tableData = res.data.list;
          this.total = res.data.count;
          this.table_loading = false;
        });
    },
    //table数据
    extableData_query(currentPage) {
      if (currentPage != null) {
        this.currentPage = currentPage;
      }
      axios
        .post(
          "http://localhost:8082/ex/queryAll?documentNumber=" +
            this.input_number +
            "&page=" +
            this.currentPage +
            "&limit=" +
            this.pagesize
        )
        .then((res) => {
          console.log(res.data);
          this.extableData = res.data.list;
          this.total = res.data.count;
          this.table_loading = false;
        });
    },
    handleSelectionChange(rows) {
      this.dropdown_show = true;
      this.selectionData = rows;
      console.log(this.selectionData);
      if (rows.length == 0) {
        this.selectionData = [];
        this.dropdown_show = false;
      }
    },
    handleClick(row) {
      axios
        .get(
          "http://localhost:8082/funi/queryByNumber?documentNumber=" +
            row.documentNumber
        )
        .then((res) => {
          this.gridData = res.data;
        });
      this.dialogTableVisible = true;
      this.payer = row.payer;
      this.documentNumber = row.documentNumber;
      this.documentDate = row.documentDate;
      this.operator = row.operator;
      this.totalAmount = row.totalAmount;
      this.remarks = row.remarks;
      this.accountBank = row.erpSettlementaccount.accountBank;
    },
    exhandleClick(row){
      axios
        .get(
          "http://localhost:8082/fine/queryByNumber?documentNumber=" +
            row.documentNumber
        )
        .then((res) => {
          this.exgridData = res.data;
        });
      this.exdialogTableVisible = true;
      this.beneficiary = row.beneficiary;
      this.documentNumber = row.documentNumber;
      this.documentDate = row.documentDate;
      this.operator = row.operator;
      this.totalAmount = row.totalAmount;
      this.remarks = row.remarks;
      this.accountBank = row.erpSettlementaccount.accountBank;
    },
    tabhandleClick(tab, event){
      console.log(tab.name);
      if(tab.name =="second"){
        this.extableData_query();
      }else{
        this.tableData_query()
      }
    }
  },
  
};
</script>
<style>
.el-form-item {
  display: inline-block;
}
#item p {
  float: left;
  padding-right: 25px;
}
</style>